<template>
  <div class="wrap">
    <user-check-box v-model="queryParams.userIds" @change="changeOption" :filter-stop="true" @apiUserFinish="changeOption" :disdisabled="loading"></user-check-box>
    <div class="header mgt20">
      <div class="left">
        <el-select
          v-model="queryParams.type"
          placeholder="请选择"
          size="small"
          class="header-select mgr10 platform-select"
          @change="changeOption"
        >
          <el-option :label="$t('shipment.allWarehouses')" value=""></el-option>
          <el-option :label="getWareHouseName()" :value="2"></el-option>
          <el-option :label="$t('shipment.mercadoFullLocal',{accountType: getMercadoName()})" :value="1" v-if="$store.getters.accountMKD"></el-option>
          <el-option :label="$t('shipment.falabellaFull')" :value="3" v-if="$store.getters.accountFalabella"></el-option>
          <el-option :label="$t('shipment.shopeeFull')" :value="4" v-if="$store.getters.accountShopee"></el-option>
          <el-option :label="$t('shipment.sheinFull')" :value="5" v-if="$store.getters.accountShein"></el-option>
          <el-option :label="$t('shipment.amazonFull')" :value="6" v-if="$store.getters.accountAmazon"></el-option>
          <el-option :label="$t('shipment.tiktokFull')" :value="7" v-if="$store.getters.accountTikTok"></el-option>
          <el-option :label="$t('shipment.aliexpressFull')" :value="8" v-if="$store.getters.accountAliexpress"></el-option>
        </el-select>

        <el-select v-model="queryParams.shipmentType" placeholder="请选择仓库类型" size="small" class="mgr10" @change="changeOption">
          <el-option :label="$t('common.全部类型')" value=""></el-option>
          <el-option :label="$t('shipment.oneStock')" :value="1"></el-option>
          <el-option :label="$t('shipment.middleWarehouse')" :value="2"></el-option>
          <el-option :label="$t('shipment.mercadoFull')" :value="3"></el-option>
        </el-select>

        <el-select v-model="queryParams.labelStatus" placeholder="请选择仓库类型" size="small" class="mgr10" @change="changeOption">
          <el-option :label="$t('table.贴标状态')" value=""></el-option>
          <el-option :label="$t('shipment.无需贴标')" :value="-1"></el-option>
          <el-option :label="$t('labelOrder.待确认')" :value="0"></el-option>
          <el-option :label="$t('labelOrder.待贴标')" :value="1"></el-option>
          <el-option :label="$t('labelOrder.已贴标')" :value="2"></el-option>
        </el-select>
      </div>
      <div class="right">
        <el-input
          size="small"
          style="width: 250px; margin-right: 10px; margin-bottom: 10px"
          v-model="queryParams.keyword"
          :placeholder="$t('搜索货件单号')"
          @keyup.enter.native="changeOption"
          clearable
          @clear="changeOption"
        ></el-input>
        <el-button size="small" type="primary" @click="changeOption">{{ $t('common.search') }}</el-button>

      </div>

    </div>
    <div class="content">
      <el-table
        :data="data"
        border
        v-loading="loading"
        @selection-change="handleSelectionChange"
        v-tableHeight="{bottomOffset: 80}"
        height="100px"
        ref="tableData"
      >
        <el-table-column
          type="selection"
          align="center"
          width="50"
          :selectable="selectable"
          fixed="left"
        >
        </el-table-column>
        <el-table-column
          :label="$t('table.shipmentNumber')"
          prop="shipmentNo"
          align="center"
          min-width="250"
          show-overflow-tooltip
          fixed
        >
          <template slot-scope="{row}">
            <diy-link @click="jumpInfo(row)">{{row.shipmentNo}}</diy-link>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('table.shopNames')"
          prop="accountList"
          align="center"
          min-width="200"
          v-if="false"
        >
          <template slot-scope="{row}">
            <div
              v-for="account in row.accountList"
              :key="account.accountId"
            >
              {{account.showName}}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('table.numberOfInboundBoxes')"
          prop="rlBoxNum"
          align="center"
          min-width="150"
        >
          <template slot-scope="{row}">
            <tool-tip-shipment-box :shipment-box="row.shipmentBox" type="RL"></tool-tip-shipment-box>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('table.warehouse')"
          prop="typeStr"
          align="center"
          min-width="150"
        >
          <template v-slot="{row}">
            {{row.warehouseName || row.typeStr}}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('table.createTime2')"
          prop="createTime"
          align="center"
          min-width="180"
        ></el-table-column>
        <el-table-column
          :label="$t('table.estimatedTime')"
          prop="estimateTime"
          align="center"
          min-width="150"
        >
          <template slot-scope="{row}">
            {{row.estimateTime || '-'}}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('table.warehousingTime')"
          prop="confirmTime"
          align="center"
          min-width="180"
        ></el-table-column>

        <el-table-column
          :label="$t('table.Number of SKU types in storage')"
          prop="exSkuNum"
          align="center"
          min-width="150"
        >
          <template slot-scope="{row}">
            <div v-if="row.type === 2">
              <span :class="{'font-red':row.rlSkuNum !== row.exSkuNum}">{{row.rlSkuNum}}</span>
              /
              <span>{{row.exSkuNum}}</span>
            </div>
            <div v-if="row.type === 1">
              <span>{{row.rlSkuNum}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('table.Total quantity of goods received')"
          prop="exGoodsNum"
          align="center"
          min-width="150"
        >
          <template slot-scope="{row}">
            <div v-if="row.type === 2">
              <span :class="{'font-red':row.rlGoodsNum !== row.exGoodsNum}">{{row.rlGoodsNum}}</span>
              /
              <span>{{row.exGoodsNum}}</span>
            </div>
            <div v-if="row.type === 1">
              {{row.rlGoodsNum}}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('table.Warehouse administrator')"
          prop="adminName"
          align="center"
          min-width="150"
        ></el-table-column>
        <el-table-column
          :label="$t('shipment.总货值（元）')"
          prop="sumGoodsValue"
          align="center"
          width="150"
        >
          <template v-slot="{row}">
            <template v-if="row.status === 1">
              {{row.rlSumGoodsValue}}
            </template>
            <template v-else>
              {{row.exSumGoodsValue}}
            </template>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('table.shipmentType')"
          prop="type"
          align="center"
          min-width="180"
        >
          <template v-slot="{row}">
            {{ getShipmentTypeStr(row.type,row.subType) }}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('table.贴标状态')"
          prop="labelStatus"
          align="center"
          min-width="150"
        >
          <template v-slot="{row}">
            {{row.labelOrder ? getLabelStatusStr(row.labelOrder.status) : '-'}}
          </template>
        </el-table-column>

        <el-table-column
          :label="$t('table.operate')"
          align="left"
          min-width="250"
          fixed="right"
        >
          <template slot-scope="{row}">
            <el-button @click="jumpInfo(row)" type="primary">{{ $t('common.view') }}</el-button>
            <export-shipment-a4 :shipment="row"></export-shipment-a4>
            <label-order-button :id="row.labelOrder.id" v-if="row.labelOrder"></label-order-button>
            <el-button v-if="row.combinationOrder" @click="jumpCombinationInfo(row.combinationOrder.id)" type="primary" class="mgb10">{{$t('combination.组装工单')}}</el-button>
            <el-button type="primary" @click="showPDFDialog(row)" :loading="row.jhLoading">{{$t('shipment.导出入库单')}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-wrap">
        <el-pagination
          style="display: inline-block"
          @current-change="getData"
          :current-page.sync="queryParams.page"
          :page-size="queryParams.pageSize"
          :total="total"
          layout="total, prev, pager, next, jumper"
        >
        </el-pagination>
        <div style="display: inline-block;padding-top: 5px;" class="mgl20">
          <el-button
            type="primary"
            :loading="printLoading"
            @click="showPDFDialog(null)"
            style="height: 30px; position: relative; top: 5px;">{{$t('shipment.导出入库单')}}</el-button>
        </div>
      </div>
    </div>

    <el-dialog :title="$t('picking.exportTitle2')" :visible.sync="PDFDialog" width="400px">
      <div style="margin-top: -15px">
        <el-radio v-model="currentPDFForm.PDFType" :label="1" class="mgb10">{{$t('picking.exportRadio1')}}</el-radio>
        <br>
        <el-radio v-model="currentPDFForm.PDFType" :label="2">{{$t('picking.exportRadio2')}}</el-radio>
      </div>
      <div slot="footer" class="dialog-footer" style="margin-top: -15px">
        <el-button @click="PDFDialog = false">{{ $t('common.cancel') }}</el-button>
        <el-button type="primary" @click="shipmentPDF" :loading="printLoading">{{ $t('common.confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import UserCheckBox from "@/views/shipment/components/UserCheckBox.vue";
import {delShipment, getShipmentList, shipmentPDF} from "@/api/shipment";
import {getWareHouseName} from "@/utils/common";
import {deepCopy, getFalabellaName, getMercadoName, getShopeeName} from "@/utils";
import LabelOrderButton from "@/views/shipment/components/LabelOrderButton.vue";
import ToolTipShipmentBox from "@/views/shipment/components/ToolTipShipmentBox.vue";
import {getLabelStatusStr} from "../../utils/labelOrder";
import {getShipmentTypeStr} from "../../utils/shipment";
import ExportShipmentA4 from "@/views/shipment/components/ExportShipmentA4.vue";
import {jumpCombinationInfo} from "@/utils/jumpView";

export default {
  name: "confirmShipmentList",
  components: {ExportShipmentA4, ToolTipShipmentBox, LabelOrderButton, UserCheckBox},
  data(){
    return {
      queryParams: {
        type: '',
        userIds: [-1],
        page: 1,
        pageSize: 20,
        status: 1,
        shipmentType: '',
        labelStatus: '',
        keyword: '',
      },
      loading: false,
      delLoading: false,
      data: [],
      total: 0,
      selectIds: [],
      selectRow: [],
      printLoading: false,
      PDFDialog: false,
      currentPDFForm:{
        pickIds: [],
        PDFType: 1,
      },
    }
  },
  created() {
    // this.getData();
  },
  updated () {
    this.$nextTick(() => {
      this.$refs['tableData'].doLayout();
    })
  },
  methods:{
    jumpCombinationInfo,
    getShipmentTypeStr,
    getLabelStatusStr,
    getShopeeName,
    getFalabellaName,
    getMercadoName,
    getWareHouseName,
    getData(){
      this.loading = true
      getShipmentList(this.queryParams)
        .then(res=>{
          this.loading = false
          this.total = res.info.total
          this.data = []
          res.data.forEach(item=>{
            const obj = deepCopy(item)
            obj.jhLoading = false // pdf
            this.data.push(obj)
          })
        })
    },
    changeOption(){
      this.queryParams.page = 1;
      this.getData()
    },
    delShipment(row){
      this.$warning(`删除后将无法恢复，请与用户核对确认该货件信息`,{
        title: '删除当前货件？',
      })
        .then(() => {
          this.delLoading = true
          delShipment(row.id)
            .then(res=>{
              this.delLoading = false
              if(res.error === 0){
                this.$successMessage(res.message)
                this.getData()
              }else{
                this.$errorMessage(res.message)
              }
            })
        })
    },
    jumpInfo(row){
      this.$router.push({
        name: 'shipmentInfo',
        query: {
          id: row.id,
        }
      })
    },
    selectable(row){
      return true;
    },
    handleSelectionChange(val){
      this.selectIds = [];
      this.selectRow = [];
      val.forEach(item=>{
        this.selectIds.push(item.id)
        this.selectRow.push(item)
      })
    },
    shipmentPDF(){
      this.printLoading = true;
      this.data.forEach(item=>{
        this.currentPDFForm.pickIds.some(pickId => {
          if(pickId === item.id){
            item.jhLoading = true
            return true
          }
        })
      })
      shipmentPDF(this.currentPDFForm)
        .then(res=>{
          this.printLoading = false;
          this.data.forEach(item=>{
            item.jhLoading = false
          })
          if(res.type === 'application/json'){
            this.$errorMessage('系统繁忙，请稍后再试');
            // this.$errorMessage('功能开发中...');
            return;
          }
          this.PDFDialog = false;
          this.currentPDFForm.pickIds = [];
          const pdfFile = window.URL.createObjectURL(
            new Blob([res.data], { type: "application/pdf" })
          );
          // 跳转页面预览
          window.open(pdfFile);
          // 60秒后释放
          setTimeout(()=>{
            URL.revokeObjectURL(pdfFile); //释放URL对象
          },60000 * 5)

        })
    },
    showPDFDialog(row = null){
      this.currentPDFForm.pickIds = [];
      if(row === null){
        this.currentPDFForm.pickIds;
        this.selectRow.forEach(item=>{
          this.currentPDFForm.pickIds.push(item.id)
        })
      }else{
        this.currentPDFForm.pickIds.push(row.id)
      }
      this.PDFDialog = true
    },
  },
}
</script>

<style scoped lang="scss">
.wrap {
  padding: 30px 30px;
  .header{
    display: flex;
    justify-content: space-between;
  }
  .content{
    padding: 20px 0 0;
  }
}
.platform-select{
  width: 215px;
}
</style>
